<!DOCTYPE html>
<html>
<head>
<title>Wave Interference Diagram</title>
</head>
<body>
<canvas id="physics-diagram" width="550" height="300"></canvas>
<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.2;

    // Coordinates
    const s1 = { x: 80, y: 80 };
    const s2 = { x: 80, y: 220 };
    const p = { x: 470, y: 150 };
    const pointRadius = 4;

    // Helper function to draw a filled arrowhead at a specific point on a line with a given angle
    function drawArrowhead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        // The point (x,y) is the tip of the arrow
        ctx.moveTo(0, 0); 
        ctx.lineTo(-size, -size / 2.5);
        ctx.lineTo(-size, size / 2.5);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
    
    // --- Drawing starts ---

    // Draw points S1, S2, P
    ctx.beginPath();
    ctx.arc(s1.x, s1.y, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(s2.x, s2.y, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(p.x, p.y, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Draw lines from sources to point P
    ctx.beginPath();
    ctx.moveTo(s1.x, s1.y);
    ctx.lineTo(p.x, p.y);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(s2.x, s2.y);
    ctx.lineTo(p.x, p.y);
    ctx.stroke();

    // Draw arrowheads on the lines
    const mid1_x = (s1.x + p.x) / 2;
    const mid1_y = (s1.y + p.y) / 2;
    const angle1 = Math.atan2(p.y - s1.y, p.x - s1.x);
    drawArrowhead(ctx, mid1_x, mid1_y, angle1, 12);

    const mid2_x = (s2.x + p.x) / 2;
    const mid2_y = (s2.y + p.y) / 2;
    const angle2 = Math.atan2(p.y - s2.y, p.x - s2.x);
    drawArrowhead(ctx, mid2_x, mid2_y, angle2, 12);

    // Draw labels
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Labels for points
    ctx.fillText('S₁', s1.x - 25, s1.y);
    ctx.fillText('S₂', s2.x - 25, s2.y);
    ctx.fillText('P', p.x + 20, p.y + 2);

    // Labels for paths
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('r₁', mid1_x, mid1_y - 20);
    ctx.fillText('r₂', mid2_x, mid2_y + 20);

</script>
</body>
</html>